<!DOCTYPE html style="width:100%">
<html lang="en" style="overflow:hidden">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="../jquery-easyui-1.5.5.5/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../jquery-easyui-1.5.5.5/themes/icon.css">
    <script type="text/javascript" src="../jquery-easyui-1.5.5.5/jquery.min.js"></script>
    <script type="text/javascript" src="../jquery-easyui-1.5.5.5/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="../js/jquery.serializejson.min.js"></script>
    <script type="text/javascript" src="../js/jquery.moment.js"></script>
    

</head>

<body>
    <table id="dg" style="height:100%;width:100%" ></table>

    <div id="tb" style="padding:2px 5px;">
        用户名: <input class="easyui-textbox" style="width:110px" id="searchName">
        <a href="#" class="easyui-linkbutton" iconCls="icon-search" id="searchData">Search</a>
        <a href="#" class="easyui-linkbutton" iconCls="icon-add" id="addData">新增数据</a>
        <a href="#" class="easyui-linkbutton" iconCls="icon-remove" id="removesData">批量删除</a>
    </div>
    <div id="dlg" class="easyui-dialog" title="数据操作" data-options="closed:true,iconCls:'icon-save',modal:true" style="width:500px;padding:10px">
        <form id="ff" method="post">
            <input type="hidden" name="_id" style="width:100%">
            <div style="margin-bottom:10px">
                <input class="easyui-textbox" name="name" style="width:100%" data-options="label:'姓名:',required:true">
            </div>
            <div style="margin-bottom:10px">
                <input class="easyui-textbox" name="sex" style="width:100%" data-options="label:'性别:',required:true">
            </div>
            <div style="margin-bottom:10px">
                <input class="easyui-textbox" name="age" style="width:100%" data-options="label:'年龄:',required:true">
            </div>
            <div style="margin-bottom:10px">
                <input class="easyui-textbox" name="hobby" style="width:100%" data-options="label:'爱好:'">
            </div>
            <div style="margin-bottom:10px">
                <input class="easyui-textbox" name="brithday" style="width:100%" data-options="label:'生日:',required:true">
            </div>
            <div style="margin-bottom:10px">
                <input class="easyui-textbox" name="work" style="width:100%" data-options="label:'职业:',required:true">
            </div>
            <div style="margin-bottom:10px">
                <input class="easyui-textbox" name="tel" style="width:100%" data-options="label:'手机号:',required:true,validType:'phoneNum'">
            </div>
            <div style="margin-bottom:10px">
                <input class="easyui-textbox" name="email" style="width:100%" data-options="label:'邮箱:',required:true,validType:'email'">
            </div>
            <div style="margin-bottom:10px">
                <input class="easyui-textbox" name="edu" style="width:100%" data-options="label:'学历:'">
            </div>
            <div style="margin-bottom:10px">
                <input class="easyui-textbox" name="boardDate" style="width:100%" data-options="label:'入职日期:',required:true">
            </div>
        </form>
        <div style="text-align:center;padding:5px 0">
            <a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()" style="width:80px">Submit</a>
            <a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()" style="width:80px">Clear</a>
        </div>
    </div>
</body>

</html>
<script>
    var host='http://10.31.156.62:3000'
    $.extend($.fn.validatebox.defaults.rules, {    
        phoneNum: { //验证手机号   
            validator: function(value, param){ 
                return /^1[3-8]+\d{9}$/.test(value);
            },    
            message: '请输入正确的手机号码。'   
        },
    
        telNum:{ //既验证手机号，又验证座机号
            validator: function(value, param){ 
                return /(^(0[0-9]{2,3}\-)?([2-9][0-9]{6,7})+(\-[0-9]{1,4})?$)|(^(()|(\d{3}\-))?(1[358]\d{9})$)/.test(value);
            },    
            message: '请输入正确的电话号码。' 
        }  
    });
    $('#dg').datagrid({
        url: host+'/users/list',
        pagination: true,
        method: 'post',
        columns: [[
            { field: 'ck', checkbox: true,align:"center"},
            { field: 'name', title: '姓名',width:'8%',align:"center"},
            { field: 'sex', title: '性别',align:"center"},
            { field: 'age', title: '年龄',align:"center"},
            { field: 'hobby', title: '爱好',width:'5%',align:"center"},
            { field: 'brithday', title: '生日',width:'5%',align:"center"},
            { field: 'work', title: '职业',width:'10%',align:"center"},
            { field: 'tel', title: '手机号',width:'12%',align:"center"},
            { field: 'email', title: '邮箱',width:'15%',align:"center"},
            { field: 'edu', title: '学历',width:'7%',align:"center"},
            { field: "boardDate",title : '入职时间',align:"center",width:'15%',formatter:function(value,row,index){
                return moment(value).format('YYYY-MM-DD');
            }},
            {
                field: '_id', title: '用户操作', width: '6%',align:"center",
                formatter: function (value, row, index) {
                    return `<a class="easyui-linkbutton"  href="javascript:editData('${row._id}')">修改</a> <a class="easyui-linkbutton" href="javascript:deleData('${row._id}')">删除</a>`;
                }
            }
        ]],
        toolbar: '#tb'
    });
    function submitForm() {
        $('#ff').form('submit', {
            onSubmit: function () {
                if ($(this).form('enableValidation').form('validate')) {
                    var formData = $("#ff").serializeJSON();
                    if (formData._id.length > 0) {
                        // 修改操作
                        $.ajax({
                            url: `${host}/users/data/${formData._id}`,
                            type: 'put',
                            data: formData
                        }).then(res => {
                            $('#dlg').dialog('close')
                            $('#dg').datagrid('reload');
                        })
                    } else {
                        // 新增操作
                        delete formData._id;
                        $.ajax({
                            url: `${host}/users/data`,
                            type: 'post',
                            data: formData
                        }).then(res => {
                            $('#dlg').dialog('close');
                            $('#dg').datagrid('reload');
                        })
                    }
                }
            }
        });
    }
    function clearForm() {
        $('#ff').form('clear');
    }
    function deleData(id) {
        $.messager.confirm('删除确认框', '你确认要删除该记录码?', function (r) {
            if (r) {
                $.ajax({
                    url: `${host}/users/data/${id}`,
                    type: 'delete'
                }).then(res => {
                    $('#dg').datagrid('reload');
                    $.messager.show({
                        title: '提示',
                        msg: '已经成功删除记录.',
                        showType: 'show'
                    });
                })
            }
        });
    }
    function editData(id) {
        $('#ff').form('clear');

        $.ajax({
            url: `${host}/users/data/${id}`,
            type: 'get'
        }).then(res => {
            $('#ff').form('load', res);
            $('#dlg').dialog('open');
        })

    }
    $("#addData").click(function () {
        $('#ff').form('clear');
        $('#dlg').dialog('open');
    })
    $("#searchData").click(function () {
        $('#dg').datagrid({
            url: `${host}/users/list`,
            method: 'post',
            queryParams: {
                name: $("#searchName").val()
            }
        });
    })
    $("#removesData").click(function () {
        var dgSelections = $('#dg').datagrid('getSelections');
        var ids = [];
        for (let i = 0; i < dgSelections.length; i++) {
            ids.push(dgSelections[i]._id);
        }
        $.messager.confirm('删除确认框', '你确认要删除该记录码?', function (r) {
            if (r) {
                $.ajax({
                    url: `${host}/users/data/removes`,
                    type: 'post',
                    data: {
                        ids: ids.toString()
                    }
                }).then(res => {
                    $('#dg').datagrid('reload');
                    $.messager.show({
                        title: '提示',
                        msg: '已经成功删除记录.',
                        showType: 'show'
                    });
                })
            }
        });

    })
</script>